<!-- 反馈页 -->
<template>
	<view>
		<!-- 意见反馈框 -->
		<view class="feedBack">
			<view class="feedTitle">
				反馈内容
			</view>
			<textarea
				placeholder="请输入200字以内评价"
				id="textarea"
				maxlength="200"
				v-on:keyup="content()"
				v-on:compositionstart="importStart()"
				v-on:compositionend="importEnd()"
				v-model="payload.content" 
			></textarea>
			<view class="textCount">{{ conterNum }}/200</view>
		</view>
		<!-- 联系方式 -->
		<view class="phone">
			<view class="feedPhone">
				联系方式
			</view>
			<input type="text" placeholder="请输入邮箱/手机号等联系方式(选填)" v-model="payload.contactInformation"/>
		</view>
		
		<!-- 提交按钮 -->
		<button class="submit" @tap="submit">确认提交</button>
	</view>
</template>

<script>
	import { _ajax } from '../../in-xupt-functions.js'
	export default {
		
		data(){
			return{
				payload:{
					content: '',
					contactInformation: ''
				},
				conterNum: 0,
				cInput: false
				}
		},
		methods:{
			content() {
				let self = this;
				if (self.cInput == false) {
					self.conterNum = self.payload.content.length;
				}
			},
			submit() {
				// 当输入为空时，弹窗提醒用户输入内容
				if(this.payload.content == ""){
					uni.showToast({
						icon: "none",
						title: "请输入反馈内容哦~"
					})
				} else {
					console.log("发起请求")
					_ajax({
							method: "POST",
							url: "/feedback",
							data: {
								'body':this.payload.content	,
								'contact': this.payload.contactInformation
							}
						}).then(res=>{
							console.log(res)
							console.log('反馈成功')
						})
					uni.showToast({
						title: '反馈成功'
					})
					setTimeout(() => {
						// this.payload = {
						// 	commentId: 0,
						// 	commentContent: "",
						// 	secrete: false,
						// 	authorNickName: ""
						// };
						this.conterNum = 0
						this.payload.content = ''
						this.payload.contactInformation = ''
					},100)
				}
				
				}
			},
			importStart() {
				this.cInput = true;
			},
			importEnd() {
				this.cInput = false
			},	
	}
</script>

<style lang="less">
	.feedBack {
		width: 90%;
		position: relative;
		margin: 0 auto;
		// border:1px solid @uni-border-color;
		// border-radius:@uni-border-radius-lg;
		padding: 5rpx;
		.feedTitle {
			font-size: 34rpx;
		}
		.feedBackText {
			display: inline-block;
			position: relative;	
		}
		.textCount {
			text-align: right;
			margin-right: 20rpx;
			color:@uni-text-color-placeholder;
		}
	} 
	.phone {
		width: 90%;
		margin: 30rpx auto;
		// border:1px solid @uni-border-color;
		// border-radius:@uni-border-radius-lg;
		padding: 5rpx;
		.feedPhone {
			font-size: 34rpx;
		}
		input {
			margin-top: 20rpx;
		}
	}
	// .submit {
	// 	// width: 225px;
	// 	// height:88px;
	// 	// border-radius:5px;
	// 	position: absolute;
	// 	bottom: 300rpx;
	// 	left: 50%;
	// 	transform: translate(-50%,0);
	// 	background-color: @g-pink;
	// 	color: @uni-text-color-inverse;
	// 	font-size: 16px;
	// }
	button {
		position: absolute;
		top: 1000rpx;
		left: 50%;
		transform: translateX(-50%);
		background-color: @g-pink;
		color: #FFF4F7;
	}
	button::after {
		border: none;
	}
	textarea {
		margin-top: 20rpx;
	}
</style>
